<!-- 地质灾害 -->
<template>
  <div class='page1'>
    <Border title="救援力量">
      <template>
        <img src="@/assets/imgs/msg.png" alt="">
        <div class="">更多</div>
      </template>
      <template #content>
        <div id="pie"></div>
      </template>
    </Border>
    <Border title="应急信息">
      <template>
        <img src="@/assets/imgs/msg.png" alt="">
        <div class="">更多</div>
      </template>
      <template #content>
        <div class="yjxx">
          <div class="tabs">
            <div @click="isTab1=true" :class="{active:isTab1}">实时动态</div>
            <div @click="isTab1=false" :class="{active:!isTab1}">任务情况</div>
          </div>
          <div class="tab tab1" v-if="isTab1">
            <ul>
              <li class="timeline" v-for="(item,index) in yjList" :key="index+'ss'">
                <div class="left"><span>{{item.time}}</span></div>
                <div class="line">
                  <span>●</span>
                </div>
                <div class="right" v-html="item.content"></div>
              </li>
            </ul>
          </div>
          <div class="tab tab2" v-else>
            <ul>
              <li class="timeline" v-for="(item,index) in yjList" :key="index+'ss'">
                <div class="left"><span>{{item.time}}</span></div>
                <div class="line">
                  <span>●</span>
                </div>
                <div class="right" v-html="item.content"></div>
              </li>
            </ul>
          </div>
        </div>
      </template>
    </Border>
    <Border title="突发事件">
      <template>
        <div>
          <img src="@/assets/imgs/history.png" alt="">
          <div class="">历史事件</div>
        </div>
        <div>
          <img src="@/assets/imgs/add.png" alt="">
          <div class="">添加</div>
        </div>
      </template>
      <template #content>
        <div class="tfsj">
          <ul>
            <li class="timeline" v-for="(item,index) in tfList" :key="index+'ss'" @click="openTfsj(item)">
              <div class="left"><span>{{item.time}}</span></div>
              <div class="line">
                <span>●</span>
              </div>
              <div class="right">
                <span v-if="item.level==1">Ⅰ</span>
                <span style="background:#FB5200" v-if="item.level==2">Ⅱ</span>
                <span style="background:#FB5200" v-if="item.level==3">Ⅲ</span>
                <span style="background:#EB034F" v-if="item.level==4">Ⅳ</span>
                <span style="background:#EB034F" v-if="item.level==5">Ⅴ</span>
                {{item.content}}
              </div>
            </li>
          </ul>
        </div>
      </template>
    </Border>
    <div class="boxsss">
      <Alert title="突发事件" :show.sync="alert">
        <div>
          时间：{{currTf.time}}<br>
          地点：滨江大道<br>
          事件：{{currTf.content}}<br>
        </div>
      </Alert>
    </div>
  </div>
</template>

<script>
import Alert from '@/components/alert.vue'

import Border from "@/components/border"
let echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/pie')			//饼图
//下面的是需要的提示框
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
export default {
  props: ['show'],
  components: { Border, Alert },
  data() {
    return {
      isTab1: true,
      alert: false,
      yjList: [
        {
          time: '3秒前',
          content: '超级管理员于01月14日15时\n转移人员统计'
        },
        {
          time: '50秒前',
          content: '超级管理员于01月14日15时\n转移人员统计'
        },
        {
          time: '1分钟前',
          content: '超级管理员于01月14日15时\n转移人员统计'
        },
        {
          time: '10分钟前',
          content: '超级管理员于01月14日15时\n转移人员统计'
        },
      ],
      tfList: [
        {
          time: '3秒前',
          content: '富邦总部大楼发生大量积水',
          level: 5
        },
        {
          time: '50秒前',
          content: '两港工业区发生大量积水',
          level: 5
        },
        {
          time: '1分钟前',
          content: '江心公园发生大量积水',
          level: 3
        },
        {
          time: '10分钟前',
          content: '鳌峰公园发生大量积水',
          level: 1,
        },
        {
          time: '20分钟前',
          content: '鳌港小区南门发生大量积水'
        },
        {
          time: '33分钟前',
          level: 1,
          content: '鳌峰路因台风天气影响发生涝水'
        },
        {
          time: '45分钟前',
          level: 1,
          content: '鳌峰路因台风天气影响发生涝水'
        },
        {
          time: '1小时前',
          level: 1,
          content: '鳌峰路因台风天气影响发生涝水'
        },
        {
          time: '1小时前',
          level: 1,
          content: '鳌峰路因台风天气影响发生涝水'
        },
      ],
      currTf: {}
    };
  },


  computed: {},


  created() { },

  mounted() {
    this.drawPie()
  },

  methods: {
    // 画环形图
    drawPie() {
      let color = ['#D2FDF1', '#FF581D', '#2EF2F2'];
      let echartData = [{
        name: "物资",
        value: "380",
        unit: '套'
      },
      {
        name: "队伍",
        value: "157",
        unit: '人'
      },
      {
        name: "装备",
        value: "300",
        unit: '个'
      },
      ];

      let total = echartData.reduce((a, b) => {
        return a + b.value * 1
      }, 0);
      var option = {
        color: color,
        title: [{
          text: '{val|' + total + '}\n{name|总数}',
          top: '50',
          left: '25',
          textStyle: {
            rich: {
              name: {
                fontSize: 12,
                fontWeight: 'normal',
                color: '#fff',
                padding: [10, 0],
                align: 'center'
              },
              val: {
                fontSize: 24,
                width: 100,
                align: 'center',
                fontWeight: 'bold',
                color: '#2CC5A2',
              }
            }
          }
        }],
        legend: {
          orient: 'vertical',
          x: 'right',
          y: 'center',
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 30,
          align: 'left',
          icon: 'circle',
          textStyle: {
            rich: {
              name: {
                fontSize: 12,
                color: '#fff',
                width: 25
              },
              value: {
                fontSize: 20,
                color: '#2CC5A2',
                fontWeight: 'bold',
                align: 'left',
                width: 70
              },
              unit: {
                color: '#fff',
                fontSize: 12,
                align: 'left',
                width: 70
              }
            }
          },
          formatter: function (name) {
            let res = echartData.filter(v => v.name == name);
            res = res[0] || {};
            let unit = res.unit || '';
            return '{name|' + name + '}  {value|' + res.value + '}{unit|' + unit + '}'
          },
          data: echartData
        },
        series: [{
          type: 'pie',
          radius: ['60%', '77%'],
          center: ['25%', '50%'],
          data: echartData,
          hoverAnimation: false,
          itemStyle: {
            borderCap: 'round'
          },
          label: false
        },
        {
          itemStyle: {
            normal: {
              color: 'a',
            }
          },
          type: 'pie',
          hoverAnimation: false,
          radius: ['60%', '85%'],
          center: ['25%', '50%'],
          label: {
            normal: {
              show: false
            }
          },
          data: [{
            value: 1,
          }],
          z: -1
        },
        {
          itemStyle: {
            normal: {
              color: 'rgba(13,248,172,.1)',
            }
          },
          type: 'pie',
          hoverAnimation: false,
          radius: ['87%', '85%'],
          center: ['25%', '50%'],
          label: {
            normal: {
              show: false
            }
          },
          data: [{
            value: 1,
          }],
          z: -1
        }]
      };
      const chart = echarts.init(document.getElementById('pie'))
      chart.setOption(option);
    },
    //打开突发事件弹窗
    openTfsj(obj) {
      this.alert = true
      this.currTf = obj
      // this.$emit('update:show', true)
    }
  }
}

</script>
<style lang='less' scoped>
.page1 {
  #pie {
    height: 150px;
    width: 95%;
  }
  .yjxx {
    height: 220px;
    padding: 5px;
    .tabs {
      display: flex;
      align-items: center;
      margin: 10px 0;
      justify-content: center;
      font-size: 14px;
      div:first-child {
        border-radius: 20px 0 0 20px;
      }
      div:last-child {
        border-radius: 0 20px 20px 0;
      }
      div {
        width: 120px;
        border: 1px solid #06586d;
        text-align: center;
        height: 22px;
        line-height: 22px;
        background: #062a4f;
        cursor: pointer;
      }
      .active {
        background: #28869b;
      }
    }
    .tab {
      height: 170px;
      overflow: auto;
      padding: 10px;
      .timeline {
        font-size: 13px;
        display: flex;
        position: relative;
        padding-bottom: 10px;
        .left {
          flex: none;
          width: 70px;
          margin-right: 30px;
          text-align: right;
          span {
            background-color: #16a8a1;
            border-radius: 50px;
            padding: 2px 8px;
          }
        }
        .line {
          position: absolute;
          height: 100%;
          border-left: 2px solid #16a8a1;
          top: 10px;
          left: 80px;
          span {
            position: absolute;
            top: -15px;
            color: #16a8a1;
            left: -7px;
            width: 10px;
            height: 10px;
            font-size: 20px;
          }
        }
        .right {
          border: 1px solid #96bfe8;
          padding: 2px 8px;
          border-radius: 10px;
        }
      }
      .timeline:last-child {
        .line {
          border-color: transparent;
        }
      }
    }
  }
  .tfsj {
    height: 290px;
    overflow: auto;
    padding: 10px;
    .timeline {
      font-size: 13px;
      display: flex;
      position: relative;
      padding-bottom: 10px;
      cursor: pointer;
      .left {
        flex: none;
        width: 70px;
        margin-right: 30px;
        text-align: right;
        span {
          background-color: #16a8a1;
          border-radius: 50px;
          padding: 2px 8px;
        }
      }
      .line {
        position: absolute;
        height: 100%;
        border-left: 2px solid #16a8a1;
        top: 10px;
        left: 80px;
        span {
          position: absolute;
          top: -15px;
          color: #16a8a1;
          left: -7px;
          width: 10px;
          height: 10px;
          font-size: 20px;
        }
      }
      .right {
        padding: 2px 8px;
        display: flex;
        span {
          width: 20px;
          height: 20px;
          line-height: 20px;
          background-color: #16a8a1;
          border-radius: 50%;
          margin-right: 10px;
          flex: none;
          text-align: center;
        }
      }
    }
    .timeline:last-child {
      .line {
        border-color: transparent;
      }
    }
    .timeline:nth-child(1),
    .timeline:nth-child(2) {
      .left {
        flex: none;
        width: 70px;
        margin-right: 30px;
        text-align: right;
        color: #333;
        span {
          background-color: #fb7a00;
          border-radius: 50px;
          padding: 2px 8px;
        }
      }
      .line {
        span {
          color: #fb7a00;
        }
      }
    }
  }
}
</style>